<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../asserts/dist/vue.js"></script>
    <script src="../asserts/dist/layui.js"></script>
    <script src="../asserts/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../asserts/dist/css/layui.css">
</head>
<body>
<div id="app">
    <div style="width: 90%;">
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" v-model="user.username"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" v-model="user.tel"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" v-model="user.email"
                       class="layui-input">
            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <img v-bind:src="user.imgUrl" style="width: 80px; height: 80px;" @click="updateImg()" id="img1">
                </div>
            </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" style="padding-top: 9px;">
                <input type="radio" name="sex" value="男" title="男" v-model="user.sex">男
                <input type="radio" name="sex" value="女" title="女" v-model="user.sex">女
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="padding-left: 23%;">
                <button type="button" class="layui-btn" @click="update()">提交</button>
            </div>
        </div>
    </div>
    <input type="file" id="file_upload" value="文件上传" style="display: none">
</div>

</body>
<script>
    var vueData = new Vue({
        el: '#app',
        data: function() {
            return {
                user:{
                },
                imgUrl:{},
                fileData:{},
            }
        },
        created() {
            this.initFrom()
        },
        methods: {
            updateImg(){
                var _this = this
                var inputDom = document.getElementById('file_upload');
                var imgDom = document.getElementById('img1');
                $("#file_upload").click()
                $("#file_upload").change(function(e) {
                    let formData = new FormData();
                    formData.append("iFile", this.files[0]);
                    _this.imgUrl = formData
                    let file = formData.get('iFile');
                    console.log('==>', file);
                    // 后期取到file文件
                    let reader = new FileReader();
                    let fileType = file.type;
                    // 调用reader进行读取
                    reader.readAsDataURL(file);
                    // reader读取完成
                    reader.onload = function (e) {
                        if(/^image\/[jpeg|png|gif]/.test(fileType)) {
                            imgDom.src = e.target.result;
                        }
                    }
                });
            },
            update(){
                var _this = this;
                console.log(_this.imgUrl.get('iFile'))
                $.ajax({
                    url: "/taobei_web/admin/upload",
                    data:_this.imgUrl,
                    type: "POST",
                    dataType: "json",
                    contentType : false,
                    processData: false,
                    success: function(res) {
                       _this.updateUser(res.msg)
                    }
                });
            },
            updateUser(imgUrl){
               var _this = this
                $.ajax({
                    url: "/taobei_web/admin/updateUser",
                    data: {
                        "id":_this.user.id,
                        "username":_this.user.username,
                        "tel":_this.user.tel,
                        "imgUrl":imgUrl,
                        "email":_this.user.email,
                        "sex":_this.user.sex,
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(res) {
                        _this.confirmTrans()
                    }
                });
            },
            callBackData(){
                return this.user
            },
            confirmTrans(){
                layui.use('layer', function(){undefined
                    var layer = layui.layer;
                    layer.msg('修改成功！', {
                        time: 2000, //20s后自动关闭
                    });
                });
            },
            initFrom(){
                var _this = this;
                $.ajax({
                    url: "/taobei_web/admin/getUserById",
                    data: {"id":_this.getQueryVariable("id")},
                    type: "GET",
                    dataType: "json",
                    success: function(res) {
                        _this.user = res.data
                    }
                });
            },
            getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
        }
    });
</script>
</html>
